import React, { Component } from 'react';
import Link from 'umi/link';
import { Icon } from 'antd';
import router from 'umi/router';

import styles from "./style.less";


class Part2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        project_count: 0,
        building_area: 0,
        house_area: 0,
        building_count: 0,
        house_count: 0,
        total_value: 0,
        renting: 0,
        rented: 0,
        renting_area: 0,
        use_area: 0
      }
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.data.rented !== undefined) {
      this.setState({
        data: nextProps.data
      });
    };
  }

  render() {
    return (
      <div className={styles.entryBox}>
        <Link to={{
          pathname: '/fe/assetManagement/projectManagement',
          state: {
            fromHomepage: true
          }
        }}>
          <div className={`${styles.entryItem} ${styles.animate3D}`}>

            <h1 className='clearfix'>
              <i className={styles.badge}><Icon type="code-sandbox-circle" theme="filled" /></i>
              &nbsp;
              项目数量
            <div className='pull-right'>
                <Icon type="pushpin" />
              </div>
            </h1>
            <big title={this.state.data.project_count}>
              <span>{this.state.data.project_count}</span>
              &nbsp;
            <small>
                个
            </small>
            </big>
            <footer className={styles.entryItemFooter}>
              总面积 <span className={styles.redCol}>{(Number(this.state.data.building_area) + Number(this.state.data.house_area) + Number(this.state.data.use_area)).toFixed(2)}</span>&nbsp;m2
          </footer>

          </div>
        </Link>
        <Link to={{
          pathname: '/fe/assetManagement/buildingManagement',
          state: {
            fromHomepage: true
          }
        }}>
          <div className={`${styles.entryItem} ${styles.animate3D}`} data-animate='false'>
            <h1 className='clearfix'>
              <i className={styles.badge}><Icon type="hdd" theme="filled" /></i>
              楼栋数量
            <div className='pull-right'>
                <Icon type="pushpin" />
              </div>
            </h1>
            <big title={this.state.data.building_count}>
              <span>{this.state.data.building_count}</span>
              &nbsp;
            <small>
                栋
            </small>
            </big>
            <footer className={styles.entryItemFooter}>
              总面积 <span className={styles.redCol}>{Number(this.state.data.building_area).toFixed(2)}</span>&nbsp;m2
          </footer>
          </div>
        </Link>
        <Link to={{
          pathname: '/fe/assetManagement/houseManagement',
          state: {
            fromHomepage: true
          }
        }}>
          <div className={`${styles.entryItem} ${styles.animate3D}`} data-animate='false'>
            <h1 className='clearfix'>
              <i className={styles.badge}><Icon type="bank" theme="filled" /></i>
              &nbsp;
              房屋数量
            <div className='pull-right'>
                <Icon type="pushpin" />
              </div>
            </h1>
            <big title={this.state.data.house_count}>
              <span>{this.state.data.house_count}</span>
              &nbsp;
            <small>
                套
            </small>
            </big>
            <footer className={styles.entryItemFooter}>
              总面积 <span className={styles.redCol}>{(Number(this.state.data.house_area) + Number(this.state.data.use_area)).toFixed(2)}</span>&nbsp;m2
          </footer>
          </div>
        </Link>
        <div className={`${styles.entryItem} ${styles.animate3D}`} data-animate='false'>
          <h1 className='clearfix'>
            <i className={styles.badge}><Icon type="money-collect" theme="filled" /></i>
            &nbsp;
            房产总价值
            <div className='pull-right'>
              <Icon type="pushpin" />
            </div>
          </h1>
          <big title={this.state.data.total_value / 10000}>
            <span>{this.state.data.total_value / 10000}</span>
            &nbsp;
            <small>
              万元
            </small>
          </big>
          <footer className={styles.entryItemFooter}>
            同比 <em className='decline'>12% </em>&nbsp;环比 <em className='gain'>24%</em>
          </footer>
        </div>

        <div className={`${styles.entryItem} ${styles.animate3D}`}>
          <h1 className='clearfix'>
            <i className={styles.badge}><Icon type="database" theme="filled" /></i>
            &nbsp;
            闲置房产/运营房产
            <div className='pull-right'>
              <Icon type="pushpin" />
            </div>
          </h1>
          <big>
            <div className="clearfix">
              <div className="pull-left" title={this.state.data.renting}>
                <span className={styles.dblspan}>{this.state.data.renting}</span>
                &nbsp;
            <small>
                  套
            </small>
              </div>
              <div className="pull-right" title={this.state.data.rented}>
                <span className={styles.dblspan}>{this.state.data.rented}</span>
                &nbsp;
            <small>
                  套
            </small>
              </div></div>
          </big>
          <footer className={styles.entryItemFooter}>
            闲置率：<span className={styles.redCol}>{~~((this.state.data.renting / (this.state.data.renting + this.state.data.rented)) * 10000).toFixed(2) / 100}%</span>
            <br />
            闲置面积：<span className={styles.redCol}>{this.state.data.renting_area}</span>&nbsp;m2
          </footer>
        </div>
      </div>
    );
  }
}

export default Part2;
